<template>
  <a-modal
    :title="'预览流程:'+schemeName"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="formLoading"> 
      <a-tabs :default-active-key="defaultActive" @change="callback">
          <a-tab-pane key="1" tab="表单信息" :force-Render="true">
            <a-form :form="form">
              <a-form-item v-show="false">
                <a-input v-decorator="['id']" />
              </a-form-item>
              <a-form-item v-show="false">
                <a-input v-decorator="['schemeName']" />
              </a-form-item>
              <a-form-item v-show="false">
                <a-input v-decorator="['frmId']" />
              </a-form-item>
              <a-form-item v-show="webId == 'kfp'" v-if="frmType == 0">
                <k-form-build :value="jsonData" ref='kfp'/>
              </a-form-item>
              <a-form-item v-show="webId == 'flcCustomForm'" v-else >
                <flc-custom-form :value="jsonData" ref="flcCustomForm" />
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="流程信息" :force-Render="true">
            <vfd ref="vfd" style="background-color: white;" :needShow="false" :fieldNames="fieldNames"></vfd>
          </a-tab-pane>
      </a-tabs>
    </a-spin>
    <user-list-form ref="userListForm" @ok="handleOk"/>
    <role-list-form ref="roleListForm" @ok="handleOk"/>
  </a-modal>
</template>

<script>
  import { vfd } from '@/components'
  import 'k-form-design/styles/k-form-design.less'
  import flcCustomForm from '@/views/flowCenter/custom/flcCustomForm'
  import userListForm from '@/views/system/user/userListForm'
  import roleListForm from '@/views/system/role/roleListForm'
  import { getFlcFlowscheme} from '@/api/modular/flowCenter/flowManage'
  export default {
    components: {
      flcCustomForm,
      vfd,
      userListForm,
      roleListForm
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        defaultActive:1,
        visible: false,
        confirmLoading: false,
        formLoading: true,
        jsonData:{},
        frmType:0,
        fieldNames:[],
        nextNodeDesignates:'',
        nextMakerName:'',
        webId:null,
        nextNodeDesignateType:null,
        schemeName:null,
        schemeContent:null,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法 
      edit (record) {
        this.schemeName = record.schemeName
        this.frmType = record.frmType
        this.webId = record.webId
        if(record.frmType == 0)
        {
          this.webId='kfp'
        }
        this.schemeContent=record.schemeContent
        const queryParam={};
        queryParam.id=record.id
        getFlcFlowscheme(queryParam).then(res => {
          if (!res.success) {
            return
          }
          if(!res.data.nextNodeDesignateType)
          {
            this.$message.error('请先设计流程') 
            return
          }
          record.nextNodeDesignateType = res.data.nextNodeDesignateType
          record.nextNodeDesignates = res.data.nextNodeDesignates
          record.NextMakerName = res.data.nextMakerName
          this.visible = true
          this.formLoading = false
          this.nextNodeDesignateType = record.nextNodeDesignateType
          switch(this.nextNodeDesignateType)
          {
              case "ALL_USER":
                this.nextMakerName="所有人"
                break
              case "RUNTIME_SPECIAL_USER":
                this.nextMakerName=""
                break
              case "RUNTIME_SPECIAL_ROLE":
                this.nextMakerName="" 
                break
              default:
                this.nextMakerName=record.nextMakerName
                break
          }
          this.jsonData = JSON.parse(record.content);
          setTimeout(() => {
            this.form.setFieldsValue(
              {
                id: record.id,
                schemeName: record.schemeName,
                frmId:record.frmId,
              }
            )
            this.importData(record.schemeContent)
            this.fieldNames=JSON.parse(record.contentParse)     
          }, 100)
        })     
      },
      importData(value){
        if(this.defaultActive == 2 && !!value)
        {
          this.$refs.vfd.loadFlow(value)
        }
        else
        {
          if(!!this.$refs.vfd)
          {
            this.$refs.vfd.clear()
          }
        }
      },
      callback(key)
      {
        this.defaultActive = key
        setTimeout(() => {
          this.importData(this.schemeContent)  
        }, 100)
      },
      getPreviewData(){
        // 使用getData函数获取数据
        const that = this
        const webId=that.webId
        that.$refs[webId].getData().then(values => {
          that.$message.success('验证通过，' + JSON.stringify(values))
          that.visible = false
          if(!!that.$refs.vfd)
          {
            that.$refs.vfd.clear()
          }
        }).catch(() => {
          that.$message.error('验证未通过，获取失败') 
        })
      },
      setUser()
      {
        if(this.nextNodeDesignateType=="RUNTIME_SPECIAL_USER")
        {
            this.$refs.userListForm.userList();
        }  
        else if(this.nextNodeDesignateType=="RUNTIME_SPECIAL_ROLE")
        {
            this.$refs.roleListForm.roleList();
        }  
      },
      //确认回调
      handleOk(value) {
        const that = this;
				if(!!record)
				{
					const nodeDesignateData=[];
					const nodeDesignateName=[];
					record.forEach(item => {
						nodeDesignateData.push(item.id);
						nodeDesignateName.push(item.name);
					});

					if(nodeDesignateName.length>0)
					{
						that.nextMakerName = nodeDesignateName.join(',');
						that.nextNodeDesignates = nodeDesignateData.join(',');
					}
				}	
      },
      handleSubmit () {
        this.confirmLoading = true
        this.getPreviewData();
        this.confirmLoading = false
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        if(!!this.$refs.vfd)
        {
          this.$refs.vfd.clear()
        }
      }
    }
  }
</script>
